/*
	* @Author: Sakura
	* @Date: 2023-08-21 17:01:47
	* @LastEditors: Sakura
	* @LastEditTime: 2023-08-23 09:50:25
	* @Description: 
	*/
import { useState } from 'react';
import {
	MenuFoldOutlined,
	MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Layout, Button, Row, Col, } from 'antd';
import { Outlet, } from "react-router-dom"
import Menu from '@/components/mainMenu'

const { Header, Content, Footer, Sider } = Layout;


const View: React.FC = () => {
    // 折叠菜单
	const [collapsed, setCollapsed] = useState(false);

	return (
		<Layout style={{ minHeight: '100vh' }}>
			{/* 左侧侧边栏 */}
			<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
				<Menu />
			</Sider>
			{/* 右边内容 */}
			<Layout>
				{/* 头部 */}
				<Header style={{ padding: 0, backgroundColor: '#fff'}} >
					<Row>
						<Col span={2}>
							<Button
								type="text"
								icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
								onClick={() => setCollapsed(!collapsed)}
								style={{
									fontSize: '16px',
									width: 64,
									height: 64,
								}}
							/>
						</Col>
						{/* 面包屑 */}
						<Col span={22}>
							<Breadcrumb 
                                style={{ lineHeight:'64px' }} 
                                items={[
                                    { title: 'User' },
                                    { title: 'Bill' }
                                ]} 
                            />
						</Col>
					</Row>
				</Header>
				{/* 内容 */}
				<Content className='content'>
					<Outlet />
				</Content>
				{/* 底部 */}
				<Footer className='footer' >Ant Design ©2023 Created by Ant UED</Footer>
			</Layout>
		</Layout>
	);
};

export default View;
